<!-- 在线网页编辑器引入 -->
<link rel="stylesheet" href="/static/kindeditor/themes/default/default.css" />
<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>
<script>
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true
        });
    })
</script>


<!-- 二级菜单 -->
<div class="fly-panel fly-column">
    <div class="layui-container">
        <ul class="layui-clear">
            <li class="layui-hide-xs {$cateid == 0 ? 'layui-this' : ''}">
                <a href="{:url('home/index/index')}">全部</a>
            </li>
            {foreach $catelist as $item}
            <li class="{$cateid == $item['id'] ? 'layui-this' : ''}"><a
                    href="{:url('home/index/index',['cateid'=> $item['id']])}">{$item.name}</a></li>
            {/foreach}

            <!-- 用户登入后显示 -->
            {if condition="$Think.cookie.LoginUser"}
            <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
                <span class="fly-mid"></span>
            </li>
            <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
                <a href="javascript:void(0)">我发表的贴</a>
            </li>
            <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
                <a href="javascript:void(0)">我收藏的贴</a>
            </li>
            {/if}
        </ul>

        <div class="fly-column-right layui-hide-xs">
            <span class="fly-search"><i class="layui-icon"></i></span>
            <a href="{:url('home/post/add')}" class="layui-btn">发表新帖</a>
        </div>

        <div class="layui-hide-sm layui-show-xs-block"
            style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
            <a href="{:url('home/post/add')}" class="layui-btn">发表新帖</a>
        </div>
    </div>
</div>

<!-- 帖子信息 -->
<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <!-- 左侧 -->
        <div class="layui-col-md8 content detail">
            <div class="fly-panel detail-box">
                <!-- 标题 -->
                <h1>{$post.title}</h1>

                <!-- 帖子状态 -->
                <div class="fly-detail-info">
                    {if condition="$post.accept"}
                    <span class="layui-badge" style="background-color: #5FB878;">已结</span>
                    {else /}
                    <span class="layui-badge" style="background-color: #999;">未结</span>
                    {/if}

                    {if condition="$post.state eq 1"}
                    <span class="layui-badge layui-bg-red">置顶</span>
                    {elseif condition="$post.state eq 2" /}
                    <span class="layui-badge layui-bg-green">精华</span>
                    {elseif condition="$post.state eq 3" /}
                    <span class="layui-badge layui-bg-black">热门</span>
                    {/if}

                    <span class="fly-list-nums">
                        <!-- 评论数 -->
                        <a href="#comment">
                            <i class="iconfont" title="回答">&#xe60c;</i> {$count}
                        </a>

                        <!-- 访问次数 -->
                        <i class="iconfont" title="人气">&#xe60b;</i> {$VisitCount}
                    </span>
                </div>


                <!-- 用户信息 -->
                <div class="detail-about">
                    <!-- 头像链接 -->
                    <a href="{:url('home/user/index', ['userid' => $post['userid']])}" class="fly-avatar">
                        {if condition="$post['user']['avatar']"}
                        <img src="{$post.user.avatar}" />
                        {else /}
                        <img src="/static/home/res/images/avatar.jpg" />
                        {/if}
                    </a>

                    <div class="fly-detail-user">
                        <!-- 昵称 -->
                        <a href="{:url('home/user/index', ['userid' => $post['userid']])}" class="fly-link">
                            <cite>{$post.user.nickname}</cite>
                            {if condition="$post.user['auth'] > 0"}
                            <i class="iconfont icon-renzheng"></i>
                            {/if}
                        </a>

                        <!-- 发布时间 -->
                        <span>{$post.createtime}</span>
                    </div>

                    <!-- 帖子按钮 -->
                    <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
                        <!-- 积分 -->
                        <span style="padding-right: 10px; color: #FF7200">
                            悬赏：<b>{$post.point}</b> 积分
                        </span>

                        <!-- 登录的用户 和 发帖人的id相等 -->
                        {if condition="$Think.cookie.LoginUser['id'] == $post.userid"}
                        <span class="layui-btn layui-btn-xs jie-admin" type="edit">
                            <a href="{:url('home/post/edit', ['postid' => $post['id']])}">编辑此贴</a>
                        </span>

                        <span class="layui-btn layui-btn-xs jie-admin layui-bg-red" type="edit" id="delpost">
                            <a href="javascript:void(0)">删除</a>
                        </span>
                        {/if}

                        {if condition="$Think.cookie.LoginUser"}
                        {if condition="$CollectStatus"}
                        <span class="layui-btn layui-btn-xs jie-admin layui-bg-black" type="edit" id="CollectDel">
                            <a href="javascript:void(0)">取消收藏</a>
                        </span>
                        {else /}
                        <span class="layui-btn layui-btn-xs jie-admin layui-bg-blue" type="edit" id="CollectAdd">
                            <a href="javascript:void(0)">收藏</a>
                        </span>
                        {/if}
                        {/if}


                    </div>
                </div>

                <!-- 正文内容 -->
                <div class="detail-body photos">
                    {$post.content}
                </div>
            </div>


            <div class="fly-panel detail-box" id="flyReply">
                <!-- 回帖的标题 -->
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    {if condition="$commentlist"}
                    {:CommentHtml($commentlist, $post)}
                    {else /}
                    <!-- 无数据时 -->
                    <li class="fly-none">消灭零回复</li>
                    {/if}
                </ul>

                <!-- 评论的表单 -->
                {if condition="$Think.cookie.LoginUser AND !$post['accept']"}
                <div id="comment" class="layui-form layui-form-pane">
                    <form action="{:url('home/comment/add')}" method="post">
                        <div class="layui-form-item">
                            <h2 id="reply-nickname"></h2>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <div class="layui-input-block">
                                <textarea id="content" name="content" placeholder="请输入内容" class="layui-textarea"
                                    style="height: 300px;"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <input type="hidden" name="pid" value="0" />
                            <input type="hidden" name="postid" value="{$post.id}" />
                            <button type="submit" class="layui-btn">提交回复</button>
                        </div>
                    </form>
                </div>
                {/if}
            </div>
        </div>

        <!-- 右侧 -->
        <div class="layui-col-md4">
            <dl class="fly-panel fly-list-one">
                <dt class="fly-panel-title">本周热议</dt>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>
                <dd>
                    <a href="">基于 layui 的极简社区页面模版</a>
                    <span><i class="iconfont icon-pinglun1"></i> 16</span>
                </dd>

                <!-- 无数据时 -->
                <!--
        <div class="fly-none">没有相关数据</div>
        -->
            </dl>

            <!-- 公众号 -->
            <div class="fly-panel" style="padding: 20px 0; text-align: center;">
                <img src="/static/home/res/images/weixin.jpg" style="max-width: 100%;" alt="layui">
                <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
            </div>

        </div>
    </div>
</div>
<script>
    layui.use('layer', function () {
        var layer = layui.layer
        var $ = layui.jquery

        //给删除按钮绑定事件
        $("#delpost").on('click', function () {
            layer.confirm('是否确认删除', { icon: 3, title: '提示' }, function (index) {

                //关闭弹框
                layer.close(index)

                //发送异步请求
                $.ajax({
                    url: `{:url('home/post/del')}`,
                    type: 'post',
                    data: `postid={$post.id}`,
                    dataType: 'json',
                    success: function (success) {
                        if (success.result) {
                            //成功
                            layer.msg(success.msg, {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                location.href = "{:url('home/index/index')}"
                                return false
                            })
                        } else {
                            //删除失败
                            layer.msg(success.msg)
                        }
                    }
                })
            })
        })

        //添加收藏
        $("#CollectAdd").on('click', function () {
            //发送异步请求
            $.ajax({
                url: `{:url('home/collect/add')}`,
                type: 'post',
                data: `postid={$post.id}`,
                dataType: 'json',
                success: function (result) {

                    if (result.code == 1) {
                        // 成功
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                    } else {
                        // 收藏失败
                        layer.msg(result.msg, {
                            icon: 5,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        })
                    }
                }
            })
        })


        //添加回复
        $(".reply").on('click', function () {
            var pid = $(this).data('pid')
            var nickname = $(this).data('nickname')

            //设置隐藏域
            $(`input[name='pid']`).val(pid)

            $("#reply-nickname").html(`回复给：${nickname}`)

            //让编辑器产生光标
            editor.focus()
        })


        // 采纳
        $(".accept").on('click', function () {

            var $dom = $(this)

            layer.confirm('是否确认采纳答案，积分将打到对应账号', { icon: 3, title: '提示' }, function (index) {

                //评论id
                var comid = $dom.data('comid')

                //关闭弹框
                layer.close(index)

                //发送异步请求
                $.ajax({
                    url: `{:url('home/comment/accept')}`,
                    type: 'post',
                    data: `comid=${comid}`,
                    dataType: 'json',
                    success: function (success) {
                        if (success.result) {
                            //成功
                            layer.msg(success.msg, {
                                icon: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                location.reload()
                            })
                        } else {
                            //失败
                            layer.msg(success.msg)
                        }
                    }
                })
            })
        })


    })
</script>